<template>
  <basic-dialog
    :visible="visible"
    :title="'查看附件'"
    :show-footer="false"
    :handle-close="onCancel"
    :handle-opened="queryFileList"
  >
    <div>
      <basic-list
        ref="table"
        :loading="tableLoading"
        showActionCol
        :data-source="fileList"
        :columns="columns"
        :show-select-col="false"
        :show-pagination="false"
        :actionRender="actionRender"
      />
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicList from '@/components/supplier/BasicTable';
import { getRelationShipService } from '@api/supplier/dataStatisticsQuery/invoicingSupplier'

export default {
  name: 'AttachmentDialog', // 查看附件弹框
  components: {
    BasicDialog,
    BasicList,
  },
  props: ['dialogVisible', 'fileGroupId'],
  data () {
    return {
      columns: [
        {
          prop: 'fileName',
          label: '附件名称',
        },
        {
          prop: 'updateTimeStr',
          label: '上传时间',
        },
      ],
      fileList: [],
      tableLoading: false
    };
  },
  computed: {
    visible () {
      return this.dialogVisible;
    },
    currentFileGroupId () {
      return this.fileGroupId;
    }
  },
  methods: {
    actionRender (h, { row }) {
      return (
        <div class="table-action">
          <el-button size="mini" type="text" onClick={() => this.handleDownLoad(row)}>下载</el-button>
        </div>
      );
    },
    queryFileList () {
      this.tableLoading = true;
      getRelationShipService({ fileGroupIds: this.currentFileGroupId }).then((res) => {
        this.tableLoading = false;
        if (res.code == 0) {
          this.fileList = res.data
          this.handleReloadTable()
        }
      }).catch(() => {
        this.tableLoading = false;
      })
    },
    onCancel () {
      this.$emit('hide-handler');
    },
    handleDownLoad (row) {
      if (!row.downloadUrl) {
        return this.$message.error('文件异常');
      }
      window.location.href = row.downloadUrl
    },
    handleReloadTable () {
      this.$nextTick(() => {
        this.$refs.table.$refs.elTable.doLayout();
      })
    }
  },
};
</script>
